{% extends 'base.html' %}
{% block title %}首页{% endblock %}
{% block content %}
<style>
    .dashboard-ns {
        width: 130px;
        height: 50px;
        border: 1px solid #ebeef5;
        border-radius: 5px;
        box-shadow: 0 1px 1px 0 #c2c2c2;
        text-align: center;
        line-height: 50px;
        font-size: 18px;
        color: #2F4056;
        margin: 5px;
        float: left;
        overflow: hidden;  /* 溢出自动隐藏*/
        text-overflow: ellipsis; /* 溢出用省略号*/
        white-space: nowrap;  /* nowrap:规定段落中的文本不进行换行 ，与上面配合使用 */
    }
    .chart {
        width: 250px;
        height:200px;
        float: left;
        margin-left: 10%
    }
    .node {
        border: 1px solid #ebeef5;
        border-radius: 5px;
        box-shadow: 0 1px 1px 0 #c2c2c2;
        height: 180px;
        width: 380px;
        float: left;
        margin: 6px
    }
    .node:hover {
        box-shadow: 0 2px 2px 0 #c2c2c2;
        cursor:pointer;
    }
    .pv {
        border: 1px solid #ebeef5;
        border-radius: 5px;
        box-shadow: 0 1px 1px 0 #c2c2c2;
        height: 150px;
        width: 260px;
        float: left;
        margin: 6px;
    }
    .pv-notice {
        background-color: #f4f4f5;
        color: #909399;
        padding: 5px;
        margin-left: 30%;
        font-size: 16px;
    }
    /* 背景 */
    .layui-badge {
        font-size: 14px;
        padding: 1px
    }
</style>
<div class="layui-col-md12 layui-col-space10">
    <div class="layui-col-md12 layui-col-space10">
        <div class="layui-col-md6">
            <div class="layui-card">

                <div class="layui-card-header">Github仓储</div>
                <div class="layui-card-header">命名空间</div>

                <div class="layui-card-body" style="height: 400px;overflow: auto" id="dashboard-ns">

                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">

                <div class="layui-card-header">本地资源路径</div>

                <div class="layui-card-header">计算资源</div>
                <div class="layui-card-body" style="height: 400px;overflow: auto">
                    <div id="chart1" class="chart"></div>
                    <div id="chart2" class="chart"></div>
                    <div id="chart3" class="chart"></div>
                    <div id="chart4" class="chart"></div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md12 layui-col-space10">
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">存储资源</div>
                <div class="layui-card-body" style="height: 400px;overflow: auto">
                    {% if pv_list %}
                    {% for pv in pv_list %}
                    <div class="pv">
                        <div class="layui-card-header">{{ pv.pv_name }}</div>
                        <div class="layui-card-body" style="line-height: 30px">
                            卷申请：
                            <span class="layui-badge layui-bg-orange">{{ pv.claim }}</span><br>
                            容量/状态：
                            <span class="layui-badge layui-bg-green">{{ pv.capacity }}</span>
                            <span class="layui-badge layui-bg-gray">/</span>
                            <span class="layui-badge layui-bg-green">{{ pv.status }}</span><br>
                            创建时间：
                            <span class="layui-badge layui-bg-blue">{{ pv.create_time }}</span>
                        </div>
                    </div>
                    {% endfor %}
                    {% else %}
                    <span class="pv-notice">此处显示PV资源，但是您目前并未创建！</span>
                    {% endif %}
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">节点状态</div>
                <div class="layui-card-body" style="height: 400px;overflow: auto;">
                    {% for k,v in node_resouces.items %}
                    <a href="{% url "node_details" %}?node_name={{ k }}">
                    <div class="node">
                        <div class="layui-card-header">{{ k }}</div>
                        <div class="layui-card-body" style="line-height: 30px">
                            CPU：
                            <span class="layui-badge layui-bg-orange"> 已分配 {{ v.cpu_requests }} 核</span>
                            <span class="layui-badge layui-bg-gray">/</span>
                            <span class="layui-badge layui-bg-green">可分配 {{ v.allocatable_cpu }} 核</span>
                            <span class="layui-badge layui-bg-gray">/</span>
                            <span class="layui-badge layui-bg-blue">总量 {{ v.capacity_cpu }} 核</span><br>
                            内存：
                            <span class="layui-badge layui-bg-orange"> 已分配 {{ v.memory_requests }} G</span>
                            <span class="layui-badge layui-bg-gray" >/</span>
                            <span class="layui-badge layui-bg-green">可分配 {{ v.allocatable_memory }} G</span>
                            <span class="layui-badge layui-bg-gray">/</span>
                            <span class="layui-badge layui-bg-blue">总量 {{ v.capacity_memory }} G</span><br>
                            短暂存储：
                            <span class="layui-badge layui-bg-green">可分配 {{ v.allocatable_ephemeral_storage }} G</span>
                            <span class="layui-badge layui-bg-gray">/</span>
                            <span class="layui-badge layui-bg-blue">总量 {{ v.capacity_ephemeral_storage }} G</span><br>
                            Pod数量：
                            <span class="layui-badge layui-bg-green">已创建 {{ v.pods_number }} 个</span>
                            <span class="layui-badge layui-bg-gray">/</span>
                            <span class="layui-badge layui-bg-blue">总量 {{ v.capacity_pods }} 个</span><br>
                        </div>
                    </div>
                    </a>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block js %}

{% endblock %}